<template>
  <div>
    <div class="service">
      <div class="service-title">
        <span>服务项目<em>/</em></span>
        <span>service</span>
      </div>
      <div class="service-imgs">
        <div class="service-img"
          v-for="item of list"
          :key="item.id"
        >
          <img :src="item.imgUrl" class="service-img-content">
          <p class="service-img-desc">{{item.desc}}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Service',
  props: {
    list: Array
  }
}
</script>

<style lang="stylus" scoped>
  .service-title
    display flex
    justify-content center
    margin .3rem 0
    align-items baseline
    em
      position relative
      top .04rem
      font-size .34rem
    span
      &:first-child
        font-size .26rem
        font-weight bold
      &:last-child
        font-size .20rem
        text-align center
        color #47B365
        margin-left .05rem
  .service-imgs
    display flex
    justify-content center
    .service-img
      margin 0 .05rem
      .service-img-content
        width .7rem
        height .7rem
      .service-img-desc
        display flex
        margin-top .08rem
        font-size .12rem
        justify-content center
</style>
